<template>
  <el-card class="search-bar" shadow="never">
    <el-form :model="model" :inline="true" @submit.prevent="handleSearch" v-bind="$attrs">
      <el-row :gutter="gutter">
        <el-col v-for="field in fields" :key="field.prop" :span="field.span || 8">
          <el-form-item :label="field.label" :prop="field.prop">
            <!-- 输入框 -->
            <el-input
              v-if="field.type === 'input'"
              v-model="model[field.prop]"
              :placeholder="field.placeholder"
              :clearable="field.clearable !== false"
              v-bind="field.attrs"
              @keyup.enter="handleSearch"
            />

            <!-- 选择框 -->
            <el-select
              v-else-if="field.type === 'select'"
              v-model="model[field.prop]"
              :placeholder="field.placeholder"
              :clearable="field.clearable !== false"
              v-bind="field.attrs"
            >
              <el-option
                v-for="option in field.options"
                :key="option.value"
                :label="option.label"
                :value="option.value"
              />
            </el-select>

            <!-- 日期选择器 -->
            <el-date-picker
              v-else-if="field.type === 'date'"
              v-model="model[field.prop]"
              type="date"
              :placeholder="field.placeholder"
              :clearable="field.clearable !== false"
              value-format="YYYY-MM-DD"
              v-bind="field.attrs"
            />

            <!-- 日期范围选择器 -->
            <el-date-picker
              v-else-if="field.type === 'daterange'"
              v-model="model[field.prop]"
              type="daterange"
              :start-placeholder="field.startPlaceholder"
              :end-placeholder="field.endPlaceholder"
              :clearable="field.clearable !== false"
              value-format="YYYY-MM-DD"
              v-bind="field.attrs"
            />

            <!-- 自定义插槽 -->
            <slot
              v-else-if="field.type === 'slot'"
              :name="field.slot"
              :model="model"
              :field="field"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-form-item class="search-actions">
        <slot name="actions">
          <el-button type="primary" @click="handleSearch">{{ searchText }}</el-button>
          <el-button @click="handleReset">{{ resetText }}</el-button>
        </slot>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script setup lang="ts">
  import {
    ElCard,
    ElForm,
    ElFormItem,
    ElInput,
    ElSelect,
    ElOption,
    ElDatePicker,
    ElRow,
    ElCol,
    ElButton,
  } from 'element-plus'

  interface FieldOption {
    label: string
    value: any
  }

  interface Field {
    prop: string
    label: string
    type?: 'input' | 'select' | 'date' | 'daterange' | 'slot'
    placeholder?: string
    startPlaceholder?: string
    endPlaceholder?: string
    clearable?: boolean
    span?: number
    options?: FieldOption[]
    slot?: string
    attrs?: Record<string, any>
  }

  interface Props {
    model: Record<string, any>
    fields: Field[]
    gutter?: number
    searchText?: string
    resetText?: string
  }

  const props = withDefaults(defineProps<Props>(), {
    gutter: 20,
    searchText: '搜索',
    resetText: '重置',
  })

  const emit = defineEmits<{
    (e: 'search'): void
    (e: 'reset'): void
  }>()

  const handleSearch = () => {
    emit('search')
  }

  const handleReset = () => {
    // 重置表单
    for (const field of props.fields) {
      if (field.type === 'daterange') {
        props.model[field.prop] = []
      } else {
        props.model[field.prop] = ''
      }
    }
    emit('reset')
  }
</script>

<style scoped>
  .search-bar {
    margin-bottom: 20px;
  }

  .search-actions {
    display: flex;
    justify-content: flex-end;
    flex-wrap: nowrap;
    white-space: nowrap;
    width: 100%;
  }

  /* 搜索按钮布局样式 - 与项目中其他页面保持一致 */
  .search-buttons {
    display: flex;
    justify-content: space-between;
    width: 100%;
  }

  .left-buttons,
  .right-buttons {
    display: flex;
    gap: 10px;
  }

  /* 适配不同屏幕尺寸 */
  @media screen and (max-width: 768px) {
    .search-actions {
      flex-direction: column;
      align-items: flex-start;
    }

    .search-buttons {
      flex-direction: column;
      gap: 10px;
    }

    .left-buttons,
    .right-buttons {
      justify-content: flex-start;
    }
  }
</style>
